<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" label-width="80px">
        <div class="flexs">
          <div>
            <el-form-item label="组织">
              <el-select v-model="form.organization" placeholder="请选择组织">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="学院管理">
              <el-select v-model="form.college" placeholder="请选择学院管理">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="学生类型">
              <el-select
                v-model="form.studentType"
                placeholder="请选择学生类型"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="所属省份">
              <el-select v-model="form.province" placeholder="所属省份">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="学习形式">
              <el-select
                v-model="form.LearningForm"
                placeholder="请选择学习形式"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="时间">
              <el-date-picker
                v-model="form.time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button size="small">同比</el-button>
              <el-button size="small">环比</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>

      <div class="flexss">
        <div class="flex">
          <div class="echarts" id="main"></div>
          <div class="echarts" id="main1"></div>
          <div class="echarts" id="main2"></div>
          <div class="echarts" id="main3"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      form: {
        organization: "",
        college: "",
        studentType: "",
        province: "",
        LearningForm: "",
        time: "",
      },
    };
  },
  methods: {
    setOptions() {
      var chartDom = document.getElementById("main");
      //   console.log(this.$echarts);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          left: "center",
          text: "学生登录次数",
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [100, 20, 170, 180, 150],
            type: "bar",
          },
          {
            data: [20, 100, 130, 80, 270],
            type: "bar",
          },
          {
            data: [200, 160, 140, 280, 70],
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    setOptions1() {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          left: "center",
          text: "学生登录对比",
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [100, 20, 170, 180, 150],
            type: "line",
          },
          {
            data: [20, 100, 130, 80, 270],
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    setOptions2() {
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          left: "center",
          text: "学生登录次数占比图",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "60%",
            data: [
              { value: 150, name: "数据150" },
              { value: 100, name: "数据100" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    setOptions3() {
      var chartDom = document.getElementById("main3");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          left: "center",
          text: "学生登录次数雷达图",
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "1月", max: 6500 },
            { name: "2月", max: 16000 },
            { name: "3月", max: 30000 },
            { name: "4月", max: 38000 },
            { name: "5月", max: 52000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000],
                name: "Allocated Budget",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.setOptions();
    this.setOptions1();
    this.setOptions2();
    this.setOptions3();
  },
  created() {},
  computed: {},
  watch: {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-card {
  margin-left: 2.5%;
  width: 95%;
  .flexs {
    display: flex;
    flex-wrap: wrap;
  }
  .flexss {
    display: flex;
    justify-content: center;
  }
  .flex {
    width: 60%;
    height: 100%;
    padding: 50px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .echarts {
      width: 360px;
      height: 300px;
      margin-top: 20px;
    }
  }
}
</style>
